Skip to main content

Sample Lesson

Welcome to the lesson on Front-end web development. This would be a self-paced class which focuses on one of the fundamental topics in HTML - Text Fundamentals. Please make sure that you are completing the entire lesson.

HTML Text Fundamentals

What are HTML Text Fundamentals?​

One of HTML's main jobs is to give text structure and meaning so that a browser can display it correctly. This lesson helps you to understand the way HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.

Why should we learn HTML Text Fundamentals?​

Let us look at two versions of a webpage to understand the reason why we should learn HTML Text Fundamentals.

Version 1:

Version 2:

When you open the version 1 webpage in your browser, you'll see that the text appears as a big chunk! That’s because there is no structure to the page. On the other hand version 2 webpage is a well-structured webpage.

Structuring the web page has a lot of other benefits as well.

They are:

  1. Attracts users

    Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings, to begin with. If they can't see anything useful within a few seconds, they'll likely leave the page.

  2. Helps in SEO

    Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).

  3. Helps visually impaired people

    Visually impaired people often don't read web pages; they listen to them instead. This is done with software called a screen reader. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.

  4. For styling & scripting

    To style content with CSS, or make it do interesting things with JavaScript, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.

Now that we have established the need for structuring, let’s dive deep into how to do that.

Headings and paragraphs in HTML:​

The most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc.

Structured content makes the reading experience easier and more enjoyable.

Heading​

A heading tag is used to define the headings of a webpage. There are six headings elements they are h1, h2, h3, h4, h5, and h6. h1 is the highest in level and h6 is the least in level.

Here are some useful links on how to create headings..

Click here to watch a video on HTML heading tag (4 minutes)

Click here to learn & practice HTML heading tag (2 minutes)

Paragraph​

The paragraph element defines a paragraph. A paragraph always starts on a new line, and browsers in default add some white space before and after a paragraph.

Here are some useful links on how to create paragraphs.

Click here to watch a video on HTML paragraph tag (5 minutes)

Click here to learn & practice HTML paragraph tag (2 minutes)

HTML List:​

Lists

Lists are everywhere in life, from your shopping list to the list of directions you subconsciously follow to get to your house every day! Lists are everywhere on the web too. Here are a few resources on how to create lists.

Click here to watch a video on lists (watch from 00:49:00 to 00:59:00) (10 minutes)

Click here to learn & practice unordered list (3 minutes)

Click here to learn & practice ordered list (3 minutes)

Emphasis and importance in HTML​

When we want to add emphasis to spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language, we tend to stress words by putting them in italics, similarly, in HTML we use the <em> (emphasis) element to mark up such instances.

Click here to watch a video on Emphasis and importance in HTML (7 minutes)

Instructions for the exercise

And voila, that’s the end of all the concepts in this lesson. Now, time for an exercise!

Required links

Boilerplate link: Dalgona coffee recepie exercise boilerplate link

How to work with exercise

Every exercise will have n number of iterations. You are expected to complete the iterations in increasing order.

For example, you will have to complete the first iteration before starting the second iteration, and so on.

You can find the instructions for completing the iterations here below as well as in the boilerplate file in which you will be working as comments.

Iteration-wise instructions

Iteration 1: Use the appropriate heading tag for the heading.

Description: In the boilerplate code the heading is not marked up. Using the knowledge that you have got from the HTML text fundamentals lesson try marking up the heading.

Note: Iteration 1 is mentioned in multiple places.

Iteration 2: Using paragraph tag

Description: In the boilerplate code the paragraph is not marked up. Using the knowledge that you have got from the HTML text fundamentals lesson try marking up the paragraph.

Note: Iteration 2 is mentioned in multiple places.

Iteration 3: Use the appropriate list tag

Description: In the boilerplate code the list is not marked up, using the knowledge that you have got from the HTML text fundamentals lesson try marking up the list.

Note: Iteration 3 is mentioned in multiple places.

Iteration 4: Use the appropriate tag to Emphasis "South Korean"

Description: In the boilerplate code the word "South Korean" is not emphasised, using the knowledge that you have got from the HTML text fundamentals lesson try emphasising the word "South Korean".

Iteration 5: Use an appropriate importance tag for the word “Dalgona” and for the steps

Description: In the boilerplate code step 1, 2 & 3 which are mentioned are important but it is not marked up, using the knowledge that you have got from the HTML text fundamentals lesson try marking up steps 1, 2 & 3 as important.

Note: Iteration 5 is mentioned in multiple places.

Iteration 6: Use an appropriate tag to underline the word "tbsp"

Description: In the boilerplate code the word “tbsp” is not marked up, using the knowledge that you have got from the HTML text fundamentals lesson try marking up the word “tbsp” so that it gets an underline.

Note: Post completion of Exercise host the completed exercise on Github and share the project link to your mentor.

Useful resources for you

Now that you’re done with this lesson, here are some useful post-class reading links for you.

https://www.w3schools.com/html/html_headings.asp

https://www.w3schools.com/tags/tag_p.asp

https://www.w3schools.com/tags/tag_em.asp

https://www.w3schools.com/html/html_lists.asp

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

End-of-the-lesson assessment

Before you go, here’s a quick 5-question quiz for you.

Learning unit: Headings and paragraphs in HTML

  1. Choose the correct HTML element for the marking up the largest heading.

  2. <h1>

  3. <h6>

  4. <heading>

  5. <head>

Answer: a

Learning Unit: Headings and paragraphs in HTML

  1. How many heading tags are there in HTML 5?

  2. 2

  3. 3

  4. 5

  5. 6

Answer: d

Learning Unit: Headings and paragraphs in HTML

  1. Is the Paragraph element a block-level element?

  2. Yes

  3. No

Answer: Yes

Learning Unit: Headings and paragraphs in HTML

  1. Question 4 of Headings and paragraphs in HTML (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: Headings and paragraphs in HTML

  1. Question 5 of Headings and paragraphs in HTML (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: Headings and paragraphs in HTML

Learning unit: List

  1. I would love to list down 7 reasons why I love Harry Potter. Which HTML tag helps me in listing the items with numbers?

  2. <ul>

  3. <list>

  4. <ol>

  5. <dl>

Answer: c

Learning Unit: HTML List

  1. Question 2 of List (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: List

  1. Question 3 of List (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: List

  1. Question 4 of List (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: List

  1. Question 5 of List (This is a placeholder).

  2. Option a

  3. Option b

  4. Option c

  5. Option d

Answer: d

Learning Unit: List

Learning unit: Emphasis and importance in HTML

  1. Choose the correct HTML element to define important text.

  2. <strong>

  3. <i>

  4. <important>

  5. <b>

Answer: a

Learning Unit: Emphasis and importance in HTML

  1. Choose the correct HTML element to define emphasized text.

  2. <em>

  3. <i>

  4. <italic>

  5. <emphasis>

Answer: a

Learning Unit: Emphasis and importance in HTML

  1. Question 3 of Emphasis and importance in HTML

(This is a placeholder).

  1. Option a
  2. Option b
  3. Option c
  4. Option d

Answer: a

Learning Unit: Emphasis and importance in HTML

  1. Question 4 of Emphasis and importance in HTML

(This is a placeholder).

  1. Option a
  2. Option b
  3. Option c
  4. Option d

Answer: a

Learning Unit: Emphasis and importance in HTML

  1. Question 4 of Emphasis and importance in HTML

(This is a placeholder).

  1. Option a
  2. Option b
  3. Option c
  4. Option d

Answer: a

Learning Unit: Emphasis and importance in HTML